<template>
  <!-- 路由导航守卫控制访问权限  需要登录之后才能访问其他api -->

  <el-container>
    <!-- 头部区域 -->
    <el-header>
      <div class="header_flex">
        <img src="../assets/logo.png" alt="" />
        <span>后台管理</span>
        <el-button type="info" @click="exit">退出</el-button>
      </div>
    </el-header>
    <!-- 内容区域 -->
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <!-- 侧边栏导航 -->
        <div class="toggle-button" @click="istoggle()">|||</div>
        <el-row class="tac">
          <el-col :span="24">
            <el-menu
              :default-active="routerActive"
              class="el-menu-vertical-demo"
              background-color="#87ceeb"
              text-color="#fff"
              active-text-color="#ffd04b"
              unique-opened
              :collapse="isCollapse"
              :collapse-transition="false"
              router
            >
              <!-- 一级菜单 -->
              <el-submenu
                :index="item.id + ''"
                v-for="item in menuList"
                :key="item.id"
              >
                <template slot="title">
                  <i :class="iconsObj[item.id]"></i>
                  <span>{{ item.authName }}</span>
                </template>
                <!-- 二级菜单 -->
                <el-menu-item
                  :index="subItem.path"
                  v-for="subItem in item.children"
                  :key="subItem.id"
                  @click="saveNav(subItem.path)"
                  ><template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>{{ subItem.authName }}</span>
                  </template>
                </el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  created() {
    this.getMenuList();
  },
  data() {
    return {
      //菜单list
      menuList: [],
      iconsObj: {
        125: "el-icon-user-solid",
        103: "el-icon-set-up",
        101: "el-icon-potato-strips",
        102: "el-icon-tickets",
        145: "el-icon-magic-stick",
      },
      //展开折叠菜单
      isCollapse: false,
      //当前页面path
      routerActive: '',
    };
  },
  methods: {
    exit() {
      //清除 token
      window.sessionStorage.clear();
      //导航到登录页
      this.$router.push("/login");
      this.$message.success("退出成功");
    },
    //获取所有的菜单
    async getMenuList() {
      const { data: res } = await this.$http.get("menus");
      // console.log(res)
      if (res.meta.status !== 200)
        return this.$message.error("获取菜单列表失败");
      this.menuList = res.data;
    },
    //展开折叠菜单
    istoggle() {
      this.isCollapse = !this.isCollapse;
    },
    saveNav(subItemPath) {
      window.sessionStorage.setItem("path", subItemPath);
      this.routerActive = window.sessionStorage.getItem("path");
    },
  },
};
</script>

<style scoped>
.el-header {
  /* position: relative; */
  background-color: skyblue;
}

.header_flex {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
}
.header_flex img {
  width: 100px;
  height: 60px;
}
.el-header .el-button {
  /* position: absolute; */
  border-color: #fff;
  margin-top: 10px;
  right: 10px;
  height: 40px;
}
.el-container {
  height: 100%;
}
.el-aside {
  height: 100%;
  background-color: skyblue;
}
.toggle-button {
  height: 30px;
  background-color: rgb(57, 68, 235);
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}
.el-header span {
  font-size: 24px;
  color: #fff;
  font-weight: 700;
  line-height: 60px;
}
.el-main {
  background-color: aliceblue;
}
</style>